<template>
  info : {{ info }}
  <br />
  <button @click="btnClick" ref="btnRef">改变info</button>
</template>

<script>
// onMounted生命周期函数传入回调函数
import { ref, onMounted } from 'vue'
export default {
  setup() {
    // beforeCreate和created生命周期函数直接在setup调用即可(去掉了)
    const info = ref('zjd')
    const btnRef = ref(null)
    console.log('setup中打印btnRef', btnRef.value)
    const btnClick = () => {
      console.log(111)
    }
    onMounted(() => {
      console.log('组件被挂载')
      console.log('onMounted中打印btnRef', btnRef.value)
    })
    return {
      info,
      btnRef,
      btnClick,
    }
  },
}
</script>
<style scoped></style>
